/**
 *
 * @param {HTMLElement} ele 元素
 */
// 定义一个函数，用于在指定的元素中生成一个雪花
function snowflake(ele) {
  // 清空指定元素的所有子元素
  while (ele.firstChild) {
    ele.removeChild(ele.firstChild);
  }
  // 创建一个svg元素
  const sf = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  // 设置svg元素的viewBox属性
  sf.setAttribute("viewBox", "0 0 100 100");

  // 创建一个g元素
  const sfG = document.createElementNS("http://www.w3.org/2000/svg", "g");
  // 随机生成一个宽度
  let arnW = randInt(10, 40) / 10;
  // 设置g元素的属性
  sfG.setAttribute("fill", "none");
  sfG.setAttribute("stroke", "#fff");
  sfG.setAttribute("stroke-width", arnW);
  sfG.setAttribute("stroke-linecap", "round");
  sfG.setAttribute("stroke-linejoin", "round");
  sfG.setAttribute("opacity", `${randInt(60, 95) / 100}`);

  // 创建一个path元素
  const sfPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  // 随机生成一个中间点数量
  let midPoints = randInt(3, 12);
  // 设置path元素的路径
  let snowflakePath = "M50 50 v-35";
  for (let i = 1; i < midPoints; i++) {
    // 随机生成一个线段长度
    let linelength = randInt(20, 120) / 10;
    // 随机生成一个y坐标
    let yPos = 50 - randInt(50, 350) / 10;
    // 设置路径
    let path = `M50 ${yPos}l-${linelength} -${linelength}M50 ${yPos}l${linelength} -${linelength}`;
    snowflakePath += path;
  }
  // 设置path元素的d属性
  sfPath.setAttribute("d", snowflakePath);
  // 生成一个随机id
  const sfId = `snow${randInt(0, 9999)}flake${randInt(0, 9999)}`;
  // 设置path元素的id属性
  sfPath.setAttribute("id", sfId);
  // 将path元素添加到g元素中
  sfG.appendChild(sfPath);

  // 随机生成一个雪花臂的数量
  const arms = randInt(6, 12);
  // 计算每个臂的角度
  const angle = 360 / arms;
  // 遍历每个臂
  for (let i = 1; i < arms; i++) {
    // 创建一个use元素
    const useEle = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "use"
    );
    // 设置use元素的href属性
    useEle.setAttribute("href", `#${sfId}`);
    // 设置use元素的transform属性
    useEle.setAttribute("transform", `rotate(${angle * i} 50 50)`);
    // 将use元素添加到g元素中
    sfG.appendChild(useEle);
  }
  // 将g元素添加到svg元素中
  sf.appendChild(sfG);
  // 将svg元素添加到指定元素中
  ele.appendChild(sf);
}

function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

let count = 25;
const ele = document.querySelector(".container");
for (let i = 0; i < count; i++) {
  const box = document.createElement("div");
  box.classList.add("box");
  snowflake(box);
  ele.appendChild(box);
}

document.addEventListener("click", () => {
  //   timeouts && clearTimeout(timeouts);
  //   ele.child.forEach((box) => {
  //     snowflake(box);
  //   });
});
